import React,{useEffect,useState} from 'react'
import {useHistory,useParams} from 'react-router-dom'
import {Toast,NavBar} from 'antd-mobile'
import * as api from './server'
import dayjs from './server/day'

const Topic = (props) => {
    //Route中component可以得到 props
    // console.log(props);//参数在props.location中
    // const {id}=props.match.params;//为什么没有内容？


    //动态路由 topic/:id不能得到结果，需要用hooks
    // const data=useParams();//动态路由配置的对象，可以解构
    const {id}=useParams();
    const history=useHistory();
    const [detail,setDetail]=useState({});

    useEffect(()=>{

        //查看收藏列表
        api.getCollect('HL1115')
        .then(res=>{
            console.log(res.data);
        })
        
        
        api.getTopic(id)
        .then(res=>{
            // console.log(res)
            setDetail(res.data);
        })
    },[])

    // //发布
    // const createTopic =()=>{
    //     api.createTopic({
    //         accesstoken:'e73b268b-f5d2-4ff1-8fd9-3581b84962e2',
    //         title:'hello',
    //         tab:'dev',
    //         content:'<h2>测试</h2>'
    //     })
    //     .then(res=>{
    //         if(res.success){
    //             alert('发布成功')
    //             Toast.show({
    //                 icon:'success',
    //                 content:'发布成功'
    //             })
    //         }
    //     })
    //     .catch(err=>{
    //         // console.dir(err.response.data.error_msg)
    //         Toast.show({//统一写到响应拦截中
    //             icon:'fail',
    //             content:err.response.data.error_msg,
    //         })
    //     })
    // }

    //收藏
    const collectTopic =()=>{
        api.collectTopic({
            accesstoken:'e73b268b-f5d2-4ff1-8fd9-3581b84962e2',
            topic_id:id
        })
        .then(res=>{
            if(res.success){
                alert('收藏成功')
            }
        })
    }

    //取消收藏
    const delCollectTopic =()=>{
        api.delCollection({
            accesstoken:'e73b268b-f5d2-4ff1-8fd9-3581b84962e2',
            topic_id:id
        })
        .then(res=>{
            if(res.success){
                alert('取消收藏成功')
            }
        })
    }
    
  return (
    <div>
         <NavBar onBack={history.goBack}>标题</NavBar>
        {/* <button onClick={createTopic}>发布主题</button> */}
        <h2>{detail.title}</h2>
        <h3 className="time">发布于{dayjs(detail.create_at).fromNow()}</h3>
        
        <button onClick={collectTopic}>收藏主题</button>
        <button onClick={delCollectTopic}>取消收藏</button>
        <div dangerouslySetInnerHTML={{__html:detail.content}} ></div> 
        {/*直接写 {content}  会有代码*/}
        {/* <div dangerouslySetInnerHTML={ {__html:props.loaction.state.content} } ></div> */}

    </div>
  )
}

export default Topic
